// 引入 path 核心模块
const path = require('path')
// 引入插件对象
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入清除 dist 的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 加载 vue 文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 引入 webpack
const webpack = require('webpack');
// 配置当前项目的相关信息
// 配置：项目的入口文件
module.exports = {
    // 配置入口文件
    entry: './src/main.js',
    // 配置当前项目中的插件
    plugins: [
        new CleanWebpackPlugin(),
        // 自动将 html 文件拷贝到 dist 目录下
        new HtmlWebpackPlugin({
            title: 'Output Management', // 设置生成 Html 的标题
            filename: 'index.html', // 生成的 html 文件的名称
            template: './index.html' // 告诉项目，当前静态文件以哪个为模块生成
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin()
    ],
    // 配置出口文件
    output: {
        // 出口文件名
        filename: 'app.js',
        // 出口文件的路径
        path: path.resolve(process.cwd(), 'dist')
    },
    // 解析
    resolve: {
        // 允许省略的后缀
        extensions: ['.js', '.vue', '.json'],
        // 设置别名
        alias: {
            "@": path.resolve(__dirname, 'src')
        }
    },
    // 开启一个小型服务器
    devServer: {
        contentBase: './dist',
        hot: true // 开启热更新
    },
    // 设置当前项目的环境
    mode: 'development',
    // 添加 source map
    devtool: 'source-map',
    // 配置打包文件的信息
    module: {
        rules: [ // 打包的其它文件的规则
            {
                // 打包以 .vue 结尾的文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // 打包以 .css 为后缀的文件
                test: /\.css$/,
                use: [
                    'style-loader', // 将 css 代码使用 style 标签包裹，并且添加到页面的 head 中 
                    'css-loader'    // 将 css 代码打包到 App.js 中
                ]
            },
            {
                // 打包以 .scss 为后缀的文件
                test: /\.scss$/,
                use: [
                    'style-loader', // 添加 style 标签到 head 中
                    'css-loader', // 将 css 代码打包到app.js 中
                    'sass-loader' // 将 sass 文件转为 css 文件
                ]
            },
            {
                // 打包以 .less 为后缀的文件
                test: /\.less$/,
                use: [
                    'style-loader', // 添加 style 标签到 head 中
                    'css-loader', // 将 css 代码打包到app.js 中
                    'less-loader' // 将 sass 文件转为 css 文件
                ]
            },
            {
                // 打包图片后缀的文件
                test: /\.(png|svg|jpg|gif)/,
                use: [
                    'file-loader'
                ]
            },
            {
                // 打包字体文件
                test: /\.(eot|woff2|woff|ttf)/,
                use: [
                    'file-loader'
                ]
            },
            {
                // 打包后缀名为 js 的文件（将 es6 转为 es5）
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}